<template>
  <div>
    <div>
      <search> </search>
    </div>
    <div id="container" class="mm">
      <div class="amap-ui-smp-ifwn-combo-sharp" ref="amap"></div>
    </div>
  </div>
</template>

<script>
import search from "@/components/search/search.vue";
export default {
  components: {
    search,
  },
  props: ["shopAddressList", "shopIndex"],
  data() {
    return {
      searchOption: {
        city: "上海",
        citylimit: true,
      },
      //地图相关
      zoom: 10,
      icon: [
        { iconTheme: "red" },
        { iconTheme: "orange" },
        { iconTheme: "green" },
        { iconTheme: "blue" },
      ],
      iconTheme: "default",
      // iconSOS: "red",
      // iconWarning: "orange",
      // iconNotHad: "green",
      // iconHad: "blue",
      center: [112.459469, 34.59281], //洛阳
      map: "",
      //坐标数据
      Alllocation: [],
    };
  },
  created() {},
  mounted() {
    // this.$nextTick(function(){  //AMap is not defined
    //     this.initMap();
    // });
    setTimeout(this.initMap, 500);
  },

  methods: {
    initMap() {
      let _this = this;
      //map
      _this.map = new AMap.Map("container", {
        zoom: _this.zoom,
        center: _this.center,
      });
      //console.log(_this.shopAddressList)
      _this.shopAddressList.forEach((v) => {
        _this.Alllocation.push(v.location.split(","));
      });

      //标注点
      AMapUI.loadUI(["overlay/SimpleMarker"], (SimpleMarker) => {
        //箭头函数声明才可访问data
        for (var i = 0; i < _this.Alllocation.length; i++) {
          var temp = [];
          temp.push(_this.Alllocation[i][0]);
          temp.push(_this.Alllocation[i][1]);
          //创建SimpleMarker实例
          new SimpleMarker({
            //图标主题
            iconTheme: _this.iconTheme,
            //背景图标样式
            iconStyle: _this.icon[i].iconTheme,
            //...其他Marker选项...，不包括content
            map: _this.map,
            position: temp,
          });
        }
      });
      
      //缩放控件
      AMapUI.loadUI(["control/BasicControl"], function (BasicControl) {
        var zoomCtrl = new BasicControl.Zoom({
          position: "br",
          showZoomNum: true,
        });
        _this.map.addControl(zoomCtrl);
      });

      //定位
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          _this.center = [data.position.lng, data.position.lat];
          AMapUI.loadUI(["overlay/SimpleMarker"], (SimpleMarker) => {
            //箭头函数声明才可访问data
            var temp = [];
            temp.push(data.position.lng);
             temp.push(data.position.lat);
            console.log('_this.temp')
            console.log(temp)
            //创建SimpleMarker实例
            new SimpleMarker({
              //图标主题
              iconTheme: _this.iconTheme,
              //背景图标样式
              iconStyle: _this.icon[2].iconTheme,
              //...其他Marker选项...，不包括content
              map: _this.map,
              position: temp,
            });
          });
          //console.log(_this.center);
          // data是具体的定位信息
        }

        function onError(data) {
          console.log(data);
          // 定位出错
        }
      });

      //
    },
  },
  watch: {
    shopIndex() {
      let _this = this;
      AMapUI.loadUI(["overlay/SimpleMarker"], (SimpleMarker) => {
        //箭头函数声明才可访问data
        var temp = [];
        temp.push(_this.Alllocation[_this.shopIndex][0]);
        temp.push(_this.Alllocation[_this.shopIndex][1]);
        console.log(temp)
        //创建SimpleMarker实例
        new SimpleMarker({
          //图标主题
          iconTheme: _this.iconTheme,
          //背景图标样式
          iconStyle: _this.icon[_this.shopIndex].iconTheme,
          //...其他Marker选项...，不包括content
          map: _this.map,
          position: temp,
        });
      });
      //提示
      AMapUI.loadUI(["overlay/SimpleInfoWindow"], function (SimpleInfoWindow) {
        var marker = new AMap.Marker({
          map: _this.map,
          zIndex: 9999999,
          position: [
            _this.Alllocation[_this.shopIndex][0],
            _this.Alllocation[_this.shopIndex][1],
          ],
        });

        var infoWindow = new SimpleInfoWindow({
          //模板, underscore
          infoTitle: "<strong><%- title %></strong>",
          infoBody:
            '<p class="my-desc">' +
            //<%= 原值插入 ..
            "<%= img %>" +
            //<%- html编码后插入
            "<%- body %>" +
            "</p>",
          //模板数据
          infoTplData: {
            title: `${_this.shopAddressList[_this.shopIndex].shopname}`,
            img: '<img src="//webapi.amap.com/theme/v1.3/autonavi.png" />',
            body: `${_this.shopAddressList[_this.shopIndex].address}`,
          },

          //基点指向marker的头部位置
          offset: new AMap.Pixel(0, -31),
        });

        function openInfoWin() {
          infoWindow.open(_this.map, marker.getPosition());
        }

        //marker 点击时打开
        marker.on("click", function () {
          openInfoWin();
        });

        openInfoWin();
      });
    },
  },
};
</script>
<style scoped>
.mm {
  height: 80vw;
  width: 100vw;
}
#pickerBox {
  position: absolute;
  z-index: 9999;
  top: 50px;
  right: 30px;
  width: 300px;
}

#pickerInput {
  width: 200px;
  padding: 5px 5px;
}

#poiInfo {
  background: #fff;
}
</style>